<template>
  <MainContent back backFunc class="main-content" @back="back">
    <template #title>
      <template v-if="id == '0'">
        创建页面
      </template>
      <template v-else>
        <div v-if="!isTitleEditable" class="edit-title" @click="isTitleEditable = true">
          {{ form.name }}
          <el-icon>
            <Edit />
          </el-icon>
        </div>
        <div v-else class="edit-title">
          <el-input v-model="titleEditModel" placeholder="请输入页面名称" show-word-limit max="30" @blur="checkTitleEdit" />
        </div>
      </template>
    </template>
    <div class="save-btn">
      <el-button type="primary" :loading="loading" @click="publish('save')">保存</el-button>
      <el-button type="primary" :loading="loading" @click="publish('preview')">保存并预览</el-button>
      <el-button type="primary" :loading="loading" @click="publish('close')">保存并关闭</el-button>
    </div>
    <div class="container">
      <div class="decorate-content-left">
        <div class="title">
          <h5>
            图文类({{ typeList.filter((i) => i.category == "picture").length }})
          </h5>
          <!-- <el-icon><ArrowDown /></el-icon> -->
        </div>
        <ul class="decorate-component">
          <li v-for="item in typeList.filter((i) => i.category == 'picture')" :key="item.type"
            @click="chooseType(item.type)">
            <div :style="{ backgroundImage: 'url(' + item.icon + ')' }">
              <p style="fontSize: 14px">{{ item.name }}</p>
              <span v-if="item.isSenior">高级</span>
              <span v-else-if="item.isBottom">置底</span>
            </div>
          </li>
        </ul>
        <ul class="decorate-component">
          <li v-for="item in typeList.filter((i) => i.category == 'Footbar')" :key="item.type"
            @click="chooseType(item.type)">
            <div :style="{ backgroundImage: 'url(' + item.icon + ')' }">
              <p style="fontSize: 14px">{{ item.name }}</p>
              <span v-if="item.isSenior">高级</span>
              <span v-else-if="item.isBottom">置底</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="decorate-content-center">
        <div class="decorate-phone">
          <div class="decorate-phone-top">
            <img class="phone-top" src="@/assets/app/bar/b.png" alt="" />
            <p>首页</p>
          </div>
          <div class="decorate-phone-bottom" ref="decoratePhoneBottom" :style="{
           backgroundColor: pageSetting.useBackground?pageSetting.backgroundColor:'transparent',
      [pageSetting.backgroundImageUrl
        ?
          'backgroundImage'
        :
          '']:
          pageSetting.useBackground?
          `url(${pageSetting.backgroundImageUrl})`:'',
          }">
            <div v-for="(item, idx) in templateTableData.filter((i) => {
              if (i.type != 'Allgoods' && i.type != 'Footbar') {
                return i;
              }
            })" :key="idx">
              <div>
                <component :is="item.type" :pageConfig="item.pageConfig">
                </component>
              </div>
            </div>
            <div v-for="(item, idx) in templateTableData.filter((i) => {
              if (i.type == 'Allgoods') {
                return i;
              }
            })" :key="idx">
              <div>
                <component :is="item.type" :pageConfig="item.pageConfig">
                </component>
              </div>
            </div>
            <div v-for="(item, idx) in templateTableData.filter((i) => {
              if (i.type == 'Footbar') {
                return i;
              }
            })" :key="idx">
              <div>
                <component :is="item.type" :pageConfig="item.pageConfig">
                </component>
              </div>
            </div>
          </div>
        </div>

        <div class="phone hiddenScroll">
          <div class="phoneContent" ref="phoneContent" v-loading="iframeLoading">
            <iframe v-show="!iframeLoading" ref="iframe" class="iframe" :src="`${iframeUrl}#/app-set`"
              frameborder="0"></iframe>
          </div>
        </div>
      </div>
      <div class="decorate-content-right">

        <div v-if="selectType">
          <component :is="selectType + 'Operation'" :pageConfig="configContent" @changeStyle="changeStyle"></component>
        </div>
        <div v-else>
          <operation-title title="页面基础配置" :icon="TitleIcon" />
          <div class="right-title">背景设置</div>
          <div class="adjust-item">
            <span>设置背景</span>
            <el-radio-group v-model="pageSetting.useBackground" @change="toUpdateIframeMessage">
              <el-radio :label="false">
                无
              </el-radio>
              <el-radio :label="true">
                自定义背景
              </el-radio>
            </el-radio-group>
          </div>
          <div class="sub-options" v-if="pageSetting.useBackground">
            <div class="sub-option">
              <p class="label label__64">
                背景色
              </p>
              <span class="control-component">
                <el-color-picker  v-model="pageSetting.backgroundColor"  @change="toUpdateIframeMessage"/>
              </span>
              <span class="value"></span>
            </div>

            <div class="sub-option">
              <p class="label label__64">
                背景图
              </p>
              <span class="control-component">
                <Upload  v-model="pageSetting.backgroundImageUrl"  file-path="actapp/" list-type="picture-card" @success="uploadSuccessBg">
                  <el-icon>
                    <Plus />
                  </el-icon>
                </Upload>
              </span>
              <!--          <span class="value">(建议图片高度40px)</span>-->
            </div>
          </div>
          <!-- <div><span>设置背景</span><el-radio-group v-model="configContent.useBackground">
          <el-radio :label="false">
            无
          </el-radio>
          <el-radio :label="true">
            自定义背景
          </el-radio>
        </el-radio-group></div> -->
        </div>
      </div>
    </div>
  </MainContent>
  <el-dialog class="dialog-form" v-model="dialogFormVisible" :title="title" width="30%" :before-close="resetForm">
    <el-form :model="form" ref="manageForm" :rules="rules" label-width="80px">
      <el-form-item label="页面名称" prop="name">
        <el-input v-model="form.name" autocomplete="off" placeholder="页面名称" maxlength="30" show-word-limit />
      </el-form-item>
    </el-form>
    <el-button type="primary" :loading="loading" @click="getPosterImg">生成封面图</el-button>&nbsp;&nbsp;<span
      style="color: red">请先生成封面图，否则可能无法更新封面图</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="resetForm()">取消</el-button>
        <el-button type="primary" :loading="loading" @click="submitForm(manageForm)">保存</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogVisible" title="确认离开此页面？" width="30%">
    <span>系统可能不会保存您所做的更改</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="back2">确认</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- <el-dialog class="dialog-form" v-model="promoteVisible" title="微信扫码预览" width="30%" :close-on-click-modal="false">
        <qrcode-vue style="margin: 10px auto; display: block" :value="`${previewPath}/${promoteId}`" :size="100"
          level="H" />
      <p style="margin: 10px auto; display: block; text-align: center">
        微信扫码预览
      </p>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="promoteVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog> -->
  <Dialog :model-value="promoteVisible" title="扫码预览" :width="500" @close="promoteVisible = false">
    <div class="qrcode-container">
      <qrcode-vue :value="pageLink" :size="200" level="H" />
      <div class="tips">
        <div>手机扫左边二维码预览</div>
        <div>
          你也可以打开
          <a :href="pageLink" target="_blank">新窗口预览</a>
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <!-- <el-button
          v-clipboard="`${link}`"
          v-clipboard:success="clipboardSuccess"
          >复制链接</el-button
        > -->
        <el-button @click="copyItemUrl">复制链接</el-button>
        <el-button type="primary" @click="promoteVisible = false">关闭</el-button>
      </span>
    </template>
  </Dialog>
</template>
<script lang="ts">
// 活动 => 落地页管理 => 新增 | 装修
import ImgCarouselOperation from "@/views/activity/actApp/components/default/operation/imgCarouselOperation.vue";
import BtngroupOperation from "@/views/activity/actApp/components/default/operation/btngroupOperation.vue";
import ImageOperation from "@/views/activity/actApp/components/default/operation/imageOperation.vue";
import ImgBroadcastOperation from "@/views/activity/actApp/components/default/operation/imgBroadcastOperation.vue";
import ImgNavOperation from "@/views/activity/actApp/components/default/operation/imgNavOperation.vue";
import ListNavOperation from "@/views/activity/actApp/components/default/operation/listNavOperation.vue";
import RichtextOperation from "@/views/activity/actApp/components/default/operation/richtextOperation.vue";
import TitleOperation from "@/views/activity/actApp/components/default/operation/titleOperation.vue";
import FloatbtnOperation from "@/views/activity/actApp/components/default/operation/floatbtnOperation.vue";
import AllgoodsOperation from "@/views/activity/actApp/components/default/operation/allgoodsOperation.vue";
import TabsOperation from "@/views/activity/actApp/components/default/operation/tabsOperation.vue";
import FootbarOperation from "@/views/activity/actApp/components/default/operation/footbarOperation.vue";
import HotOperation from "@/views/activity/actApp/components/default/operation/hotOperation.vue";
import NoticeOperation from "@/views/activity/actApp/components/default/operation/noticeOperation.vue";
import CubeOperation from "@/views/activity/actApp/components/default/operation/cubeOperation.vue";
import IntegralOperation from "@/views/activity/actApp/components/default/operation/integralOperation.vue";
import InformationOperation from "@/views/activity/actApp/components/default/operation/informationOperation.vue";

import ImgCarousel from "@/views/activity/actApp/components/default/show/imgCarousel.vue";
import Btngroup from "@/views/activity/actApp/components/default/show/btngroup.vue";
import Image from "@/views/activity/actApp/components/default/show/image.vue";
import ImgBroadcast from "@/views/activity/actApp/components/default/show/imgBroadcast.vue";
import ImgNav from "@/views/activity/actApp/components/default/show/imgNav.vue";
import ListNav from "@/views/activity/actApp/components/default/show/listNav.vue";
import Richtext from "@/views/activity/actApp/components/default/show/richtext.vue";
import Title from "@/views/activity/actApp/components/default/show/title.vue";
import Floatbtn from "@/views/activity/actApp/components/default/show/floatbtn.vue";
import Allgoods from "@/views/activity/actApp/components/default/show/allgoods.vue";
import Goodsgroup from "@/views/activity/actApp/components/default/show/goodsgroup.vue";
import Tabs from "@/views/activity/actApp/components/default/show/tabs.vue";
import Footbar from "@/views/activity/actApp/components/default/show/footbar.vue";
import Hot from "@/views/activity/actApp/components/default/show/hot.vue";
import Notice from "@/views/activity/actApp/components/default/show/notice.vue";
import Cube from "@/views/activity/actApp/components/default/show/cube.vue";
export default {
  components: {
    ImgCarouselOperation,
    BtngroupOperation,
    ImageOperation,
    ImgBroadcastOperation,
    ImgNavOperation,
    ListNavOperation,
    RichtextOperation,
    TitleOperation,
    FloatbtnOperation,
    AllgoodsOperation,
    TabsOperation,
    FootbarOperation,
    HotOperation,
    NoticeOperation,
    CubeOperation,
    IntegralOperation,
    InformationOperation,
    ImgCarousel,
    Btngroup,
    Image,
    ImgBroadcast,
    ImgNav,
    ListNav,
    Richtext,
    Title,
    Floatbtn,
    Allgoods,
    Goodsgroup,
    Tabs,
    Footbar,
    Hot,
    Notice,
    Cube
  },
};
</script>
<script lang="ts" setup>
import TitleIcon from "@/assets/app/icon/secKill.png";
import OperationTitle
  from "@/views/activity/actApp/components/default/operationComponents/operationTitle/OperationTitle.vue";
import { reactive, onMounted } from "vue";
import draggable from "vuedraggable";
import type { FormInstance } from "element-plus";
import { templateItem } from "@/api/modules/actapp";
import { getPreviewUrl } from "@/api/pointsMall";
import html2canvas from "html2canvas";
import { upload as uploadPicture } from "@/utils/minio-upload";
import { storePageEdit, getStorePage } from "@/api/actapp";
import typeList from "./typeList";
import QrcodeVue from "qrcode.vue";
const promoteVisible = ref(false);
const pageLink = ref("")
const store = useStore();
const previewPath = `${(window as any).VUE_APP_URL[import.meta.env.MODE].appPreviewPath}${store.state.user.merchant.merchantCode}#/activity/page`;
const promoteId = ref(0);

const currentUid = ref("");
let floatbtnHeight = ref("");
const route = useRoute();
const dialogVisible = ref(false);
const router = useRouter();
let configContent = ref();

let tableData = reactive([] as Array<templateItem>);
let templateTableData = reactive([] as Array<templateItem>);
const uuid = () => {
  return Math.random().toString(36).substr(3, 10);
};
const loading = ref(false);
const final_status = ref('')
const publish = (status: string) => {
  final_status.value = status
  //新增
  if (id.value == '0') {
    dialogFormVisible.value = true;
  } else { //编辑
    submitForm(undefined)
  }
};
const id = ref("0");

const sliceItem = (idx: string) => {
  let dd = 0;
  for (let i = 0; i < templateTableData.length; i++) {
    if (templateTableData[i].uid == idx) {
      dd = i;
    }
  }
  templateTableData.splice(dd, 1);
  if (templateTableData.length > 0) {
    getCurrentUid(templateTableData[0].uid);
  } else {
    selectType.value = "";
    configContent.value = {};
  }
};
const type = ref("");
const getCurrentUid = (idx: string) => {
  currentUid.value = idx;
  templateTableData.forEach((i) => {
    if (i.uid == currentUid.value) {
      selectType.value = i.type;
      configContent.value = i.pageConfig;
    }
  });
};
const chooseType = (i: string) => {
  console.log(i);
  let flag = 1;
  templateTableData.forEach((c) => {
    if (c.type == i && i == "Floatbtn") {
      flag = 2;
    }
    if (c.type == i && (i == "Allgoods" || i == "Footbar")) {
      flag = 3;
    }
  });
  if (flag == 2) {
    ElMessage.warning("只能存在一组浮动按钮");
    return;
  } else if (flag == 3) {
    ElMessage.warning("置底组件只能添加一个");
  } else {
    type.value = i;
    selectType.value = i;
    const temp = uuid();
    templateTableData.push({
      uid: temp,
      type: i,
      pageConfig: JSON.parse(
        JSON.stringify(
          typeList.filter((j) => {
            return j.type == i;
          })[0].pageConfig
        )
      ),
    });
    configContent.value = JSON.parse(
      JSON.stringify(
        typeList.filter((j) => {
          return j.type == i;
        })[0].pageConfig
      )
    );
    currentUid.value = temp;
  }
};
const copyItemUrl = () => {
  let oInput = document.createElement("input");
  // 将想要复制的值
  oInput.value = pageLink.value;
  // 页面底部追加输入框
  document.body.appendChild(oInput);
  // 选中输入框
  oInput.select();
  // 执行浏览器复制命令
  document.execCommand("Copy");
  // 复制后移除输入框
  ElMessage({
    showClose: true,
    message: "复制成功",
    type: "success",
  });
  oInput.remove();
};
const selectType = ref("");

const changeStyle = (style: Object) => {
  for (let i = 0; i < templateTableData.length; i++) {
    if (templateTableData[i].uid == currentUid.value) {
      templateTableData[i].pageConfig = style;
    }
  }
};
const iframeLoading = ref(true),
  iframeUrl = (window as any).VUE_APP_URL[import.meta.env.MODE].appPreviewPath + store.state.user.merchant.merchantCode,
  iframeReady = ref(false),
  iframe = ref();

const pageSetting=ref({
  useBackground:false,
  backgroundColor:'#fff',
  backgroundImageUrl:""
})
const uploadSuccessBg=(val)=>{
  pageSetting.value.backgroundImageUrl=val.url??''
  toUpdateIframeMessage()
}
const handleMessage = (event: any) => {
  var data = event.data;
  console.log("接收到活动消息：", data);
  switch (data.method) {
    case "webpackOk":
      iframeReady.value = true;
      break;
    case "sliceIdx":
      sliceItem(data.params);
      break;
    case "getCurrentUid":
      getCurrentUid(data.params);
      break;
    case "changeSort":
      Object.assign(templateTableData, JSON.parse(data.params));
      break;
    case "addCopy":
      Object.assign(templateTableData, JSON.parse(data.params));
      break;
    default:
      break;
  }
};
const toUpdateIframeMessage = async () => {
  console.log("发送消息");
  (iframe as any).value.contentWindow.postMessage(
    {
      method: "updateIframeMessage",
      params: {
        pageSettings:JSON.stringify(pageSetting.value),
        templateConfig:JSON.stringify(templateTableData),
        currentUid: currentUid.value,
      },
    },
    "*"
  );
};
let form = ref({
  id: "",
  name: "",
});
const dialogFormVisible = ref(false);
let title = ref("新增页面应用");
const rules = reactive({
  name: [
    {
      required: true,
      message: "请输入页面名称",
      trigger: "blur",
    },
  ],
});
const manageForm = ref<FormInstance>();
const resetForm = () => {
  form.value = {
    id: "",
    name: "",
  };
  manageForm.value?.resetFields();
  dialogFormVisible.value = false;
};
let posterUrl = "";
const decoratePhoneBottom = ref();
const getPosterImg = (showTip:true) => {
  return new Promise(resolve=>{
    loading.value = true;
    window.pageYOffset = 0;
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;
    const targetDom = decoratePhoneBottom.value; // 获取要截图的元素
    console.log(targetDom.offsetWidth);
    console.log(targetDom.offsetHeight);
    const scale = window.devicePixelRatio; // 设备的devicePixelRatio
    html2canvas(targetDom, {
      useCORS: true,
      width: targetDom.offsetWidth,
      height: 620,
      scrollX: 0,
      scrollY: 0,
      scale,
      dpi: 200, // 处理模糊问题
    }).then(async (canvas) => {
        const url = canvas.toDataURL();
        const picture = base64ImgtoFile(url);
        const result: any = await uploadPicture(picture, "act");
        if (result.url) {
          showTip&&ElMessage.success("生成封面图成功");
          loading.value = false;
        }
        posterUrl = result.url;
        resolve()
      });
    })
};
// dataurl 为传进来的base64格式的图片地址， return 返回的为file格式
const base64ImgtoFile = (dataurl: any, filename = "file") => {
  let arr = dataurl.split(",");
  let mime = arr[0].match(/:(.*?);/)[1];
  let suffix = mime.split("/")[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], `${filename}.${suffix}`, {
    type: mime,
  });
};
// const getPosterImg = () => {
//   let iframeHtml = iframe.value.contentWindow;
//   const iframeBody = iframeHtml.document.getElementsByTagName("body")[0];
//   const iframeScrollY = iframeHtml.document.documentElement.scrollTop;
//   const iframeScrollX = iframeHtml.document.documentElement.scrollLeft;
//   html2canvas(iframeBody, {
//     allowTaint: true,
//     useCORS: true,
//     width: iframeHtml.offsetWidth,
//     height: iframeHtml.offsetHeight,
//     x: iframeScrollX,
//     y: iframeScrollY,
//   }).then(async (canvas) => {
//     const url = canvas.toDataURL();
//     const picture = base64ImgtoFile(url);
//     const result: any = await uploadPicture(picture, "act");
//     if (result.url) {
//       ElMessage.success("生成封面图成功");
//       loading.value = false;
//     }
//     posterUrl = result.url;
//   });
// };
const save = async () => {
  let rs;
  if (posterUrl) {
    const params = {
      id: id.value == "0" ? "" : id.value,
      name: form.value.name,
      type: 2,
      img: posterUrl,
      pageConfig: JSON.stringify(templateTableData),
      pageSettings:JSON.stringify(pageSetting.value)
    };
    loading.value = true
    rs = await storePageEdit(params);
    loading.value = false
    if (rs.code == 200) {
      ElMessage.success("保存成功");
      resetForm();
      if (final_status.value == 'preview') {
        router.push("/activity/pageList/createEditApp/" + rs.payload.id);
        const rs2 = await getStorePage({ id: rs.payload.id });
        Object.assign(templateTableData, JSON.parse(rs2.payload.pageConfig));
        Object.assign(pageSetting.value,JSON.parse(rs2.payload.pageSettings))
        // posterUrl = rs2.payload.img;
        id.value = route.params.id;
        form.value.name = rs2.payload.name;
        promote(id.value)
      } else if (final_status.value == 'save') {
        router.push("/activity/pageList/createEditApp/" + rs.payload.id);
        const rs2 = await getStorePage({ id: rs.payload.id });
        Object.assign(templateTableData, JSON.parse(rs2.payload.pageConfig));
        Object.assign(pageSetting.value,JSON.parse(rs2.payload.pageSettings))
        // posterUrl = rs2.payload.img;
        id.value = route.params.id;
        form.value.name = rs2.payload.name;
      } else {
        router.push("/activity/pageList");
      }
    }
  } else {
    ElMessage.warning("请先生成封面图");
  }
}
const submitForm = async (formEl: FormInstance | undefined) => {
  //编辑
  if (!formEl && id.value != '0') {
    await getPosterImg(false)
    save()  
  } else {
    // if (!formEl) return;
    formEl.validate(async (valid, fields) => {
      if (valid) {
        save()
        // if (posterUrl) {
        // let rs;
        // const params = {
        //   id: id.value == "0" ? "" : id.value,
        //   name: form.value.name,
        //   type: 2,
        //   img: posterUrl,
        //   pageConfig: JSON.stringify(templateTableData),
        // };
        // loading.value=true
        // rs = await storePageEdit(params);
        // loading.value=false
        // if (rs.code == 200) {
        //   ElMessage.success("保存成功");
        //   resetForm();
        //   if (final_status.value == 'preview') {
        //     router.push("/activity/pageList/createEditApp/" + rs.payload.id);
        //     const rs2 = await getStorePage({ id: rs.payload.id });
        //     Object.assign(templateTableData, JSON.parse(rs2.payload.pageConfig));
        //     // posterUrl = rs2.payload.img;
        //     id.value = route.params.id;
        //     form.value.name = rs2.payload.name;
        //     promote(id.value)
        //   } else if (final_status.value == 'save') {
        //     router.push("/activity/pageList/createEditApp/" + rs.payload.id);
        //     const rs2 = await getStorePage({ id: rs.payload.id });
        //     Object.assign(templateTableData, JSON.parse(rs2.payload.pageConfig));
        //     // posterUrl = rs2.payload.img;
        //     id.value = route.params.id;
        //     form.value.name = rs2.payload.name;
        //   } else {
        //     router.push("/activity/pageList");
        //   }
        // }
        // } else {
        //   ElMessage.warning("请先生成封面图");
        // }
      } else {
        console.log("报错啦！请重新试一下", fields);
      }
    });
  }
};
const promote = async (id: number) => {
  let previewData: any = await getPreviewUrl({ id: id })
  if (previewData.code === 200) {
    pageLink.value = previewData.payload.previewUrl;
    promoteVisible.value = true;
  }
};
const back = () => {
  dialogVisible.value = true;
};
const back2 = () => {
  router.push("/activity/pageList");
};
watch(templateTableData, () => {
  toUpdateIframeMessage();
});
watch([iframeReady], ([ready1]: Array<boolean>) => {
  if (ready1) {
    iframeLoading.value = false;
    toUpdateIframeMessage();
  }
});
onMounted(async () => {
  sessionStorage.setItem('type', 'page')
  id.value = route.params.id;
  if (id.value != "0") {
    const rs = await getStorePage({ id: id.value });
    Object.assign(templateTableData, JSON.parse(rs.payload.pageConfig));
    Object.assign(pageSetting.value,JSON.parse(rs.payload.pageSettings))
    posterUrl = rs.payload.img;
    form.value.name = rs.payload.name;
  }
  document.onkeydown = function (e) {
    if (e.keyCode == 13 || e.keyCode == 108) {
      return false;
    }
  };
  window.addEventListener("message", handleMessage, false);
});
</script>
<style scoped lang="scss">
.main-content {
  position: relative;

  :deep(.all-content) {
    margin: 0;
    height: calc(100vh - 88px);
  }

  .save-btn {
    position: absolute;
    right: 100px;
    top: 20px;
  }

  :deep(.content-slot) {
    height: 100%;
  }

  :deep(.white) {
    padding: 0 !important;
  }
}

.container {
  width: 100%;
  display: flex;
  height: calc(100vh - 88px);
  overflow: hidden;

  .decorate-content-left {
    width: 300px;
    padding: 16px;
    overflow: auto;
    border-radius: 4px;
    background: #fff;

    .title {
      width: calc(100% - 24px);
      height: 40px;
      line-height: 40px;
      padding-left: 12px;
      padding-right: 12px;
      font-weight: 700;
      color: #666;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f7f7fa;

      h5 {
        font-size: 16px;
      }
    }

    .decorate-component {
      width: calc(100% - 48px);
      margin: 10px auto;
      display: flex;
      flex-wrap: wrap;

      li {
        list-style: none;
        width: calc(33.3% - 4px);
        border: 2px solid #fff;
        border-radius: 5px;

        &:hover {
          border-color: #fb6638;
        }

        &.active {
          border-color: #fb6638;
        }

        div {
          width: 76px;
          height: 76px;
          margin: 0 auto;
          background-size: 100% 100%;
          position: relative;

          p {
            position: absolute;
            left: 0;
            bottom: 0;
            line-height: 28px;
            color: #333;
            width: 100%;
            text-align: center;
            font-size: 16px;
          }

          span {
            background: red;
            color: #fff;
            position: absolute;
            border-radius: 4px;
            right: 1px;
            font-size: 11px;
            padding: 0 2px;
            zoom: 0.9;
            top: 1px;
          }
        }
      }
    }
  }

  .decorate-content-center {
    height: 100%;
    flex: 1;
    background: #f2f4f7;
    padding-bottom: 50px;
    overflow: auto;
    position: relative;

    .decorate-phone {
      width: 377px;
      height: auto;
      border: 1px solid #ddd;
      background: #fafafa;
      margin: 50px auto 0;
      position: absolute;
      z-index: -1;
      background-repeat: no-repeat;
      background-size: 100%;

      &-top {
        width: 375px;
        height: 88px;
        position: relative;

        p {
          position: absolute;
          width: 160px;
          height: 30px;
          left: calc(50% - 80px);
          top: calc(50% + 7px);
          font-style: normal;
          font-weight: 700;
          font-size: 18px;
          line-height: 30px;
          text-align: center;
          mix-blend-mode: normal;
        }
      }

      &-bottom {
        min-height: 300px;
        >div {
          position: relative;
          // min-height: 600px;
          .float-btn-container {
            width: 100%;
            position: absolute;

            &-top {
              position: relative;
              top: 0;
              left: 0;
              width: 100%;
            }

            &-bottom {
              // position: relative;
            }
          }

          &:hover {
            .sure-close {
              display: block;
            }
          }
        }

        .selected {
          border: 2px solid #fb6638;
        }

        .selectedF {
          box-sizing: border-box;
          border: 2px solid #fb6638;
        }

        .sure-close {
          display: none;
          position: absolute;
          right: 5px;
          top: 5px;
          cursor: pointer;
        }
      }

      .phone-top {
        width: 375px;
        height: 88px;
      }
    }

    .phone {
      width: 375px;
      flex-shrink: 0;
      height: 750px;
      margin: 0 auto;
      padding-top: 80px;
      background: url(@/assets/images/5CE8E8915B724C57964D4B54C5FD21A1_11af.png) no-repeat;
      background-size: 100%;
      position: relative;
      box-sizing: border-box;

      .resetAll {
        position: absolute;
        top: -40px;
        left: 0;
      }

      .phoneContent {
        display: block;
        width: 326px;
        height: 620px;
        margin: 0 auto;
        overflow: auto;

        &::-webkit-scrollbar {
          display: none;
        }

        .iframe {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .decorate-content-right {
    height: 100%;
    width: 420px;
    overflow: auto;
    background: #fff;
    position: relative;
  }
}

.qrcode-container {
  display: flex;
  align-items: center;
  justify-content: center;

  .tips {
    color: #666666;
    margin-left: 20px;
    font-size: 14px;

    div {
      &+div {
        margin-top: 10px;
      }
    }

    a {
      color: var(--el-color-primary);
    }
  }
}

.edit-title {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 400px;

  :deep(.el-icon) {
    margin-left: 10px;
  }

  :deep(.el-input) {
    width: 400px;
  }
}

.right-title {
  padding: 20px 16px;
  line-height: 1;
  color: #47565d;
  font-weight: bolder;
}

.adjust-item {
  display: flex;
  align-items: center;
  padding: 0 16px;
  padding-bottom: 20px;
  font-size: 16px;

  span {
    width: 64px;
    text-align: right;
    margin-right: 15px;
    color: #666;
  }
}
.sub-options{
  padding-bottom: 20px;
  border-bottom: 5px solid #f6f7f9;
}
.sub-option{
  margin:0 16px;
  background: #f4f3f7;
  border-radius: 4px;
  padding: 10px;
  display: flex;
  align-items: center;
  .label__64{
    width: 64px;
    flex-shrink: 0;
  }
  .control-component{
    margin: 0 10px;
  }
  .value{
    color: #999;
  }
}
</style>
